<template>
  <div class="ranking-list">
    <div
      class="game-item"
      v-for="(item, index) in props.rankingList"
      :key="index"
    >
      <div :class="{ num: true, numPre: index <= 2 }">{{ index + 1 }}</div>
      <div class="detail">
        <a :href="item.link" target="_blank" :title="item.name">
          <img :src="item.img" :alt="item.name" />
          <span>{{ item.name }}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  rankingList: Array,
});
</script>

<style scoped lang="less">
.ranking-list {
  display: flex;
  flex-wrap: wrap;
  .game-item {
    width: 176px;
    height: 236px;
    margin: 0 0 7px 20px;
    position: relative;

    .num {
      font-size: 22px;
      display: block;
      width: 41px;
      height: 41px;
      background: url(https://www.ali213.net/images/phb_n2.png) no-repeat;
      color: white;
      font-weight: bold;
      line-height: 37px;
      position: absolute;
      margin: 0;
      top: 0;
      left: 0;
      z-index: 10;
      text-align: center;
    }
    .numPre {
      background: url(https://www.ali213.net/images/phb_n3.png) no-repeat;
    }
    .detail {
      position: relative;
      margin: 6px 0 0 6px;
      overflow: hidden;

      a {
        img {
          width: 120px;
          height: 160px;
          border-radius: 5px;
          display: block;
          margin: 0 0 12px;
          box-shadow: 2px 2px 8px 0px rgb(0 0 0 / 60%);
          transition: all 0.3s;
          &:hover {
            opacity: 0.8;
            transform: scale(1.05);
          }
        }
        span {
          width: 120px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #4e4e4e;
          font-size: 16px;
          overflow: hidden;
          display: block;
          &:hover {
            color: rgb(255, 69, 12);
          }
        }
      }
      &::after {
        position: absolute;
        right: -3px;
        bottom: 0;
        background: url(https://www.ali213.net/images/phb_n9.png) no-repeat
          center;
        content: "";
        width: 37px;
        height: 37px;
        display: block;
      }
    }
  }
}
</style>
